import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Result, ActivityIndicator, Tools } from 'weaver-mobile';

const getLabel = Tools.getLabel;

@inject('homePageTestStore')
@withRouter
@observer
export default class HidenPage extends React.Component {

  componentDidMount() {
      const { homePageTestStore } = this.props;
      const { getHidenMenuConfig, setState } = homePageTestStore;

      setState({hasAdd: false})
      getHidenMenuConfig();    
      this.initnav()
  }

  componentWillUnmount() {
    }
      // EM客户端顶部头信息
    initnav = () => {
      let that = this;
      if (window.em && window.em.checkJsApi("configNavigation")){
        window.em.ready(function() {
          window.em.changeTitle({
            title:'',
            success:function(){
            }
          })
          window.em.configNavigation({
            'success': function (argument) {},
            'fail': function (argument) {},
            'cancel': function (argument) {},
            'complete': function (argument) {},
            'left': {
              'name':getLabel('1290','返回'),
              'action': function() {
                that.returnworking();
              },
            },  //左侧按钮的名字 回调事件，回调的参数，单个事件
            'right': {},  //右侧按钮的 名字 多个，回调事件列表 回调参数列表
            'title':'',
            'showCloseButton': false  // 是否显示关闭按钮，显示之后 一键关闭，不传，按默认行为处理
          })
        });
      }
    }

    returnworking = () => {
      // this.props.history.go(-1);
      const query = this.props.history.location.search
      this.props.history.push(`/menu-preview${query}`)
      }    

    renderMenuItem(hidenMenuConfig) {
        const { homePageTestStore } = this.props;
        const { addhidenItem } = homePageTestStore;
        let menuItemEles = []

          for (let itemindex = 0; itemindex < hidenMenuConfig.length; itemindex++) {
          let item = hidenMenuConfig[itemindex];
          menuItemEles.push(
            (
              <div className="entrance-item" key={item.id}>
                <div className="entrance-item-img" >
                   <img className="entrance-item-icon" src={item.img_src || item.img_src} />
                    <div className='entrance-item-button'  onClick={() => addhidenItem(item)}>
                    <Icon type='blog-gengduo' size='xxs' color='green'> </Icon></div> 
                </div>
                
                <div className="entrance-item-title">{item.module_visible}</div>
              </div>
            )
          )
        }
        return menuItemEles;
      }

    renderMenu(hidenMenuConfig) {
        let menuEles = []
    
        for (let index = 0; index < hidenMenuConfig.length; index++) {
          let group = hidenMenuConfig[index];
          let items = this.renderMenuItem(group)

          if ( items.length > 0) { 
            menuEles = menuEles.concat(items);
          }
        }
        return menuEles;
      }

    render() {
        const { disableMenu, isHidenmenuInited } = this.props;
        const hidenMenuConfig = this.props.hidenMenuConfig || window.menuPageConfig || [];  

      if (disableMenu === 0) {
        return (<div className="wm-home-page">
          <div className='img-container'>
            <img src="../../../../spa/coms/images/menu_nodata.png" />
            <span>页面维护中，暂停使用</span>
          </div>
        </div>)
      }
      if (isHidenmenuInited) {
          let menu = this.renderMenu(hidenMenuConfig);

          if (menu.length === 0) {
            return (<div className="wm-home-page">
              <Result
                img={<Icon type={'no-data'} size='lg' />}
                message={getLabel('83553', '暂无数据')}
              />
            </div>)
          }
          return (
            <div className="wm-home-page">
              {menu}
            </div>
          )

        }
       else {
        return (<ActivityIndicator toast text="loading" size='large' />)
      }
    }
}